<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="/js/libs/axios.js"></script>
    <script src="/js/libs/vue.js"></script>
    <script src="/js/libs/jq3.6.js"></script>

    <link rel="stylesheet" href="/css/libs/http_cdn.jsdelivr.net_npm_bootstrap@4.6.2_dist_css_bootstrap.css"
          crossorigin="anonymous">
    <link rel="stylesheet" href="/css/main.css">

    <title>Bot代挂信息</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light tm-0">
    <a class="navbar-brand" href="/">
        <img style="opacity: 0.86;max-width: 50px; border-radius: 999px"
             class="navbar-brand" src="/icon" alt="qq"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/">QQ代挂 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://kloping.top/">kloping's</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">更多功能;敬请期待.</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <a class="dropdown-item" target="_blank" href="https://github.com/gdpl2112/dg-bot">
                <img style="opacity: 0.86;max-width: 35px" alt="github" loading="lazy"
                     src="https://s.nmxc.ltd/sakurairo_vision/@2.6/display_icon/sora/github.png">
                github 开源地址
            </a>
        </form>
    </div>
</nav>

<center style="margin-top: 50px;color: rgba(33,151,252,0.95);"><h1> Bot代挂信息 个人中心 </h1></center>
<div id="divm" class="container" style="margin-top: 45px">
    <div class="row" style="margin-bottom: 25px;">
        <div class="col-2"></div>
        <div style="border-radius: 15px;background-color: rgba(142,211,180,0.4);text-align: center;" class="col-8">
            <br>
            <img style="max-width: 75px" :src="user.icon" alt="icon">
            <br>
            <br>
            <div class="media-body">
                <br>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">QQ</span>
                    </div>
                    <input type="text" aria-label="name" class="form-control" :value="user.qid">
                </div>
                <br>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">昵称</span>
                    </div>
                    <input type="text" aria-label="name" class="form-control" :value="user.nickname">
                </div>
                <br>
                <div class="input-group form-inline">
                    <div class="alert alert-secondary" role="alert">
                        代挂剩余时间:
                        <div :class="'form-group mx-sm-5 mb-2 '+ je0(user.expire)">{{je(user.expire)}}</div>
                    </div> &nbsp;&nbsp;
                    <div class="alert alert-secondary" role="alert">
                        自上次登录已在线时长:
                        <div :class="'form-group mx-sm-5 mb-2 '+ ji0(user.t0)">{{formatMsgTime1(user.t0, "未在线")}}
                        </div>
                    </div>
                </div>
                <br>
                <hr>
                <div class="alert alert-info" role="alert">
                    <a href="/conf.html" type="button" class="btn btn-outline-info">配置中心</a>
                </div>
                <hr>
                <div class="input-group form-inline">

                    <div class="alert alert-info" role="alert">
                        管理员数: {{count.mc}} &nbsp;
                        <a href="/manager.html" type="button" class="btn btn-info">管理</a>
                    </div>
                    &nbsp;&nbsp;
                    <div class="alert alert-secondary" role="alert">
                        cron任务数: {{count.cc}} &nbsp;
                        <a href="/cron-list.html" type="button" class="btn btn-secondary">管理</a>
                    </div> &nbsp;&nbsp;

                    <div class="alert alert-warning" role="alert">
                        被动消息数: {{count.pc}} &nbsp;
                        <a href="/passive.html" type="button" class="btn btn-warning">管理</a>
                    </div>

                    <div class="alert alert-primary" role="alert">
                        调用api数: {{count.cac}} &nbsp;
                        <a href="/call-api.html" type="button" class="btn btn-light">管理</a>
                    </div>
                </div>
            </div>
            <br>
        </div>
    </div>
</div>
<script src="/js/utils.js"></script>
<script>
    let vm1 = new Vue({
        el: "#divm",
        created: function () {
            axios.get("/user").then(function (response) {
                vm1.user = response.data
                if (vm1.user.t0 > 0) {
                    setInterval(function () {
                        vm1.user.t0++;
                    }, 1000);
                }
            }).catch(function (err) {
                alert(err);
            });
            axios.get("/statistics").then(function (response) {
                vm1.count = response.data;
            }).catch(function (err) {
                alert(err);
            })
        }, data: {
            user: {t0: -1},
            k1: false,
            count: {mc: 0, cc: 0, pc: 0},
        }, methods: {
            je: function (t) {
                let dateTime = new Date(t)
                let nowTime = new Date()
                if (nowTime.getTime() > dateTime.getTime()) {
                    return "已过期"
                } else {
                    let year = dateTime.getFullYear()
                    let month = dateTime.getMonth() + 1
                    let day = dateTime.getDate()
                    return "至" + year + "-" + month + "-" + day
                }
            }
            , je0: function (t) {
                let dateTime = new Date(t)
                let nowTime = new Date()
                if (nowTime.getTime() > dateTime.getTime()) {
                    return "alert alert-danger"
                } else {
                    return "alert alert-success"
                }
            }, ji0: function (t) {
                if (t <= 0) {
                    return "alert alert-danger"
                } else {
                    return "alert alert-success"
                }
            }
        }
    });
</script>
<script src="/js/libs/http_cdn.jsdelivr.net_npm_jquery@3.5.1_dist_jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="/js/libs/http_cdn.jsdelivr.net_npm_bootstrap@4.6.2_dist_js_bootstrap.bundle.js"
        crossorigin="anonymous"></script>
</body>
</html>